<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/game_hall.css">
</head>

<body>
    <div class="nav">gobang</div>
    <div class="container">
        <div>
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
        </div>

    </div>
</body>
<script src="/js/jquery-3.7.1.min.js"></script>
<script>
    $.ajax({
        type: "get",
        url: "/userInfo",
        success: function(user) {
            if(user) {
                let screenDiv = document.querySelector('#screen')
                screenDiv.innerHTML = "玩家：" + user.userName + "&nbsp;&nbsp;分数：" + user.score 
                + "<br/> 比赛场次：" + user.totalCount +"&nbsp;&nbsp;获胜场次：" + user.winCount
            }else {
                alert("内部错误，找管理员")
            }
        },
        error: function(error) {
            alert("获取用户信息失败")
        }
    })


    let webSocketUrl = "ws://"+location.host+"/findMatch"
    let websocket = new WebSocket(webSocketUrl)
    websocket.onopen = function() {
        console.log("onopen")
    }
    websocket.onclose = function () {
        console.log("onclose")
    }
    websocket.onerror = function() {
        console.log("onerror")
    }

    //监听页面关闭事件，在页面关闭之前，关闭 websocket
    window.onbeforeunload = function () {
        websocket.close();
    }

    websocket.onmessage = function(e) {
        let response = JSON.parse(e.data);
        let matchButton = document.querySelector('#match-button')
        if (!response.ok) {
            console.log("游戏大厅中接受到了失败响应"+response.reason)
            return;
        }
        if (response.message == 'startMatch') {
            console.log("进入匹配队列成功")
            matchButton.innerHTML = '匹配中。。。(再次点击停止匹配)';
        } else if (response.message == 'stopMatch') {
            console.log("退出匹配队列")
            matchButton.innerHTML = '开始匹配'
        } else if (response.message == 'matchSuccess') {
            console.log('匹配到对手，进入游戏房间')
            location.replace('/game_room.html')
        } else if (response.message == 'notLoggedIn') {
            alert("用户未登录，请先登录")
            location.replace('/login.html')
        } else if (response.message == 'repeatConnection') {
            alert("检测到玩家多开")
            location.replace('/login.html')
        }else {
            console.log("收到非法响应！ message = "+response.message)
        }
    }


    let matchButton = document.querySelector("#match-button")
    matchButton.onclick = function() {
        //确认 websocket 是否连接
        if (websocket.readyState == websocket.OPEN) {

            if (matchButton.innerHTML == "开始匹配") {
                console.log("开始匹配")
                websocket.send(JSON.stringify({
                    message: 'startMatch'
                }))
            } else if (matchButton.innerHTML == '匹配中。。。(再次点击停止匹配)') {
                console.log("停止匹配")
                websocket.send(JSON.stringify({
                    message: 'stopMatch'
                }))
            }
        } else {
            //连接异常处理
            alert("当前连接断开，请重新登录！")
            location.replace("/login.html")
        }
    }
</script>
</html>